<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="修改密码" @ok="handleSubmit">
    <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
      <a-form-item name="oldPassword">
        <div class="black font-size-13">原有密码</div>
        <div class="pass-padding">
          <a-input-password v-model:value="formState.oldPassword" placeholder="原有密码" />
        </div>
        <div style="display: block">
          <span class="gray-9e float-left font-size-13">进入网站的登录密码</span>
        </div>
      </a-form-item>
      <a-form-item name="password">
        <span class="black font-size-13">新密码</span>
        <div class="pass-padding">
          <a-input-password v-model:value="formState.password" placeholder="新密码" />
        </div>
        <!-- <span class="gray-9e font-size-13">8-20位，需包含字母和数字</span> -->
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
<script lang="ts" name="user-pass-word-modal" setup>
  import { ref, computed, unref, reactive } from "vue"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import type { RuleObject } from "ant-design-vue/lib/form/interface"

  import { updatePassword } from "/@/api/iam/tenantUser"
  import { useMessage } from "/@/hooks/web/useMessage"
  import * as securityApis from '/@/api/iam/security'
  import { debounce } from "/@/utils/common/compUtils"

  const $message = useMessage()
  const username = ref<string>("")
  const userId = ref<string>()
  const formRef = ref()
  const formState = reactive({
    oldPassword: "",
    password: "",
  })
  const emit = defineEmits(["success", "register"])
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false })
    username.value = data.record.userName
    userId.value = data.record.id
  })
  const validatorRules: Record<string, any[]> = {
    password: [
      { required: true, validator: debounce(remoteValidatePassword, 500), trigger: "change"  }
    ],
    oldPassword: [{ required: true, message: "请输入原有密码" }],
  }

  async function handleSubmit() {
    try {
      let values = await formRef.value.validateFields()
      setModalProps({ confirmLoading: true })
      values.username = unref(username)
      values.confirmPassword = values.password
      values.userId = userId.value
      await updatePassword(values).then((res) => {
        if (res.success) {
          $message.createMessage.info({
            content: "密码修改成功",
            duration: 3,
          })
          closeModal()
        } else {
          $message.createMessage.warn(res.msg)
        }
      })
    } finally {
      setModalProps({ confirmLoading: false })
    }
  }

  /**
   * 验证新密码是否为空
   */
  async function remoteValidatePassword(_: RuleObject, value: string) {
    if (value === "") {
      return Promise.reject("请输入新密码")
    }
    const result = await securityApis.validatePassword({ password: value })
    if (result.success) {
      return Promise.resolve()
    } else {
      return Promise.reject(result.msg);
    }
  }
</script>
<style lang="less" scoped>
  .black {
    color: #000000;
  }
  .font-size-13 {
    font-size: 13px;
    line-height: 15px;
  }
  .gray-9e {
    color: #9e9e9e;
  }
  .float-left {
    float: left;
  }
  .pass-padding {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .forget {
    float: right;
    color: #1e88e5 !important;
    cursor: pointer;
  }
</style>
